<template>
  <div>
    <!-- 评论列表 -->
    <div class="mui-card comment-list">
      <div class="mui-card-header">发表评论</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <textarea
            id="textarea"
            placeholder="请输入要评论的内容，不能超过100个字"
            maxlength="120"
            v-model="content"
          ></textarea>
          <mt-button type="primary" size="large" @click="submitComment">发表</mt-button>
        </div>
      </div>
    </div>

    <div class="mui-card comment-list" v-for="(item, i) in list" :key="item.id">
      <div
        class="mui-card-header"
      >第{{ i+1 }}楼&nbsp;&nbsp;{{item.user_name}}&nbsp;&nbsp;发表时间：{{ item.add_time | dateFormat }}</div>
      <div class="mui-card-content">
        <div
          class="mui-card-content-inner"
        >{{ item.content =='undefined' ? '此用户没有写任何内容':item.content }}</div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-button plain type="danger" size="large" @click="more">加载更多</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      list: [],
      pageIndex: 1,
      content: ""
    };
  },
  created() {
    this.getCommentList();
  },
  methods: {
    getCommentList() {
      this.$http
        .get("api/getcomments/" + this.newId + "?pageindex=" + this.pageIndex)
        .then(rs => {
          let data = rs.body;
          console.log(data);
          if (data.status === 0) {
            this.list = this.list.concat(data.message);
          }
        });
    },
    more() {
      this.pageIndex++;
      this.getCommentList();
    },
    submitComment() {
      this.$http
        .post("api/postcomment/" + this.newId, { content: this.content }, {})
        .then(rs => {
          let data = rs.body;

          if (data.status === 0) {
            // 组织一条数据插入到当前列表的首部
            let obj = {
              add_time: Date.now(),
              content: this.content,
              user_name: "匿名用户"
            };
            this.list.unshift(obj);

            this.content = "";
            Toast("评论成功");
          }
        });
    }
  },
  props: ["newId"]
};
</script>


<style lang="less" scoped>
textarea {
  margin: 0;
  font-size: 13px;
}
.comment-list {
  .mui-card-header {
    font-size: 13px;
    color: #fff;
    background: rgb(38, 162, 255);
  }
  .mui-card-content-inner {
    font-size: 13px;
  }
}
.more {
  margin: 5px;
  .mint-button {
    font-size: 16px;
  }
}
</style>
